<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信任机制游戏设计文档</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#7c3aed',
                        accent: '#f59e0b',
                        success: '#10b981',
                        danger: '#ef4444',
                        trust: {
                            high: '#f59e0b',
                            neutral: '#6b7280',
                            broken: '#dc2626'
                        }
                    },
                    fontFamily: {
                        'game': ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'bounce-gentle': 'bounce 2s infinite',
                        'float': 'float 3s ease-in-out infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'shake': 'shake 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.3s ease-out',
                        'fade-in': 'fadeIn 0.5s ease-out'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        glow: {
                            '0%': { boxShadow: '0 0 20px rgba(245, 158, 11, 0.5)' },
                            '100%': { boxShadow: '0 0 30px rgba(245, 158, 11, 0.8)' }
                        },
                        shake: {
                            '0%, 100%': { transform: 'translateX(0)' },
                            '25%': { transform: 'translateX(-5px)' },
                            '75%': { transform: 'translateX(5px)' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        }
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-trust-high {
                @apply border-2 border-trust-high shadow-lg shadow-trust-high/20 hover:shadow-xl hover:shadow-trust-high/30 transition-all duration-300 transform hover:scale-105;
            }
            .card-trust-neutral {
                @apply border-2 border-trust-neutral shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-102;
            }
            .card-trust-broken {
                @apply border-2 border-trust-broken shadow-md shadow-danger/20 hover:shadow-lg hover:shadow-danger/30 transition-all duration-300;
            }
            .gradient-text {
                @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
            }
            .glass-effect {
                @apply backdrop-blur-md bg-white/80 dark:bg-gray-900/80 border border-white/20 dark:border-gray-800/20;
            }
        }
    </style>
</head>

<body class="bg-gradient-to-br from-blue-50 via-purple-50 to-indigo-50 min-h-screen font-game">
    <!-- 导航栏 -->
    <nav class="glass-effect sticky top-0 z-50 px-6 py-4">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center animate-glow">
                    <i class="fa fa-heart text-white text-lg"></i>
                </div>
                <h1 class="text-2xl font-bold gradient-text">信任机制游戏设计</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button onclick="scrollToSection('game-mechanics')" class="px-4 py-2 text-gray-700 hover:text-primary transition-colors">
                    <i class="fa fa-gamepad mr-2"></i>游戏机制
                </button>
                <button onclick="scrollToSection('tech-implementation')" class="px-4 py-2 text-gray-700 hover:text-secondary transition-colors">
                    <i class="fa fa-code mr-2"></i>技术实现
                </button>
                <button onclick="toggleTheme()" class="px-4 py-2 text-gray-700 hover:text-accent transition-colors">
                    <i class="fa fa-moon-o mr-2"></i>主题
                </button>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="max-w-7xl mx-auto px-6 py-8">
        <!-- 英雄区域 -->
        <section class="text-center mb-16 animate-fade-in">
            <div class="relative">
                <div class="absolute inset-0 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-3xl blur-3xl"></div>
                <div class="relative z-10">
                    <h2 class="text-5xl md:text-6xl font-bold gradient-text mb-6">
                        创新信任机制
                    </h2>
                    <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
                        探索11种独特的游戏信任机制设计和10种前端技术实现方案，为您的游戏项目提供完整的信任系统解决方案
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <button onclick="scrollToSection('game-mechanics')" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                            <i class="fa fa-play mr-2"></i>开始探索
                        </button>
                        <button onclick="showTrustDashboard()" class="px-8 py-3 border-2 border-primary text-primary rounded-xl hover:bg-primary hover:text-white transition-all duration-300">
                            <i class="fa fa-bar-chart mr-2"></i>信任仪表盘
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 游戏机制部分 -->
        <section id="game-mechanics" class="mb-20">
            <div class="text-center mb-12">
                <h3 class="text-4xl font-bold gradient-text mb-4">游戏信任机制设计</h3>
                <p class="text-gray-600 text-lg">11种创新的信任系统设计，提升玩家协作体验</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 机制卡片1 -->
                <div class="glass-effect rounded-2xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up card-trust-high">
                    <div class="w-12 h-12 bg-gradient-to-r from-trust-high to-accent rounded-xl flex items-center justify-center mb-4">
                        <i class="fa fa-exchange text-white text-xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-gray-800 mb-3">双向信任同步卡牌机制</h4>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        玩家与AI伙伴各持半副卡组，关键回合需同步选择"信任/背叛"卡牌。双方均选信任触发组合技，单方背叛获短期收益但AI下三回合概率不出强力卡。
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-high/10 text-trust-high rounded-full text-sm">协作机制</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">AI交互</span>
                        <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">策略深度</span>
                    </div>
                    <button onclick="showMechanicDetail(1)" class="w-full py-2 text-primary hover:text-secondary transition-colors">
                        <i class="fa fa-info-circle mr-2"></i>查看详情
                    </button>
                </div>

                <!-- 机制卡片2 -->
                <div class="glass-effect rounded-2xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up card-trust-neutral">
                    <div class="w-12 h-12 bg-gradient-to-r from-trust-neutral to-gray-500 rounded-xl flex items-center justify-center mb-4">
                        <i class="fa fa-clock-o text-white text-xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-gray-800 mb-3">信任衰减卡牌时效系统</h4>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        "盟约卡"初始信任值满格，若连续3回合未被队友卡牌配合激活，信任值随进度条衰减，最终变为"猜忌卡"效果减半。
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-neutral/10 text-trust-neutral rounded-full text-sm">时效系统</span>
                        <span class="px-3 py-1 bg-danger/10 text-danger rounded-full text-sm">风险机制</span>
                        <span class="px-3 py-1 bg-success/10 text-success rounded-full text-sm">修复机制</span>
                    </div>
                    <button onclick="showMechanicDetail(2)" class="w-full py-2 text-primary hover:text-secondary transition-colors">
                        <i class="fa fa-info-circle mr-2"></i>查看详情
                    </button>
                </div>

                <!-- 机制卡片3 -->
                <div class="glass-effect rounded-2xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up card-trust-broken">
                    <div class="w-12 h-12 bg-gradient-to-r from-trust-broken to-danger rounded-xl flex items-center justify-center mb-4">
                        <i class="fa fa-users text-white text-xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-gray-800 mb-3">社交众筹信任卡牌池</h4>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        玩家发起"史诗信任任务"，需向好友众筹"信任筹码"激活强力卡牌。众筹人数达标但任务失败时，发起者与参与者共同承担资源损失。
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-broken/10 text-trust-broken rounded-full text-sm">社交玩法</span>
                        <span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-sm">众筹机制</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">风险共担</span>
                    </div>
                    <button onclick="showMechanicDetail(3)" class="w-full py-2 text-primary hover:text-secondary transition-colors">
                        <i class="fa fa-info-circle mr-2"></i>查看详情
                    </button>
                </div>

                <!-- 机制卡片4 -->
                <div class="glass-effect rounded-2xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up card-trust-high">
                    <div class="w-12 h-12 bg-gradient-to-r from-trust-high to-accent rounded-xl flex items-center justify-center mb-4">
                        <i class="fa fa-line-chart text-white text-xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-gray-800 mb-3">信任可视化卡牌进化体系</h4>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        每张卡牌初始为"中立形态"，随玩家信任行为动态进化。连续5次协作解锁"圣约形态"，累计3次背叛变为"破碎形态"。
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-high/10 text-trust-high rounded-full text-sm">进化系统</span>
                        <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">策略深度</span>
                        <span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-sm">长期价值</span>
                    </div>
                    <button onclick="showMechanicDetail(4)" class="w-full py-2 text-primary hover:text-secondary transition-colors">
                        <i class="fa fa-info-circle mr-2"></i>查看详情
                    </button>
                </div>

                <!-- 机制卡片5 -->
                <div class="glass-effect rounded-2xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up card-trust-neutral">
                    <div class="w-12 h-12 bg-gradient-to-r from-trust-neutral to-gray-500 rounded-xl flex items-center justify-center mb-4">
                        <i class="fa fa-question-circle text-white text-xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-gray-800 mb-3">盲选信任囚徒困境对决</h4>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        PVP对战中，双方同时盲选"信任/防御/背叛"三类卡牌，倒计时结束同步翻转。战后生成"信任图谱"展示对手历史选择倾向。
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-neutral/10 text-trust-neutral rounded-full text-sm">PVP对战</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">囚徒困境</span>
                        <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">数据分析</span>
                    </div>
                    <button onclick="showMechanicDetail(5)" class="w-full py-2 text-primary hover:text-secondary transition-colors">
                        <i class="fa fa-info-circle mr-2"></i>查看详情
                    </button>
                </div>

                <!-- 机制卡片6 -->
                <div class="glass-effect rounded-2xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up card-trust-broken">
                    <div class="w-12 h-12 bg-gradient-to-r from-trust-broken to-danger rounded-xl flex items-center justify-center mb-4">
                        <i class="fa fa-link text-white text-xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-gray-800 mb-3">跨场景信任继承机制</h4>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        卡牌在PVE副本中积累的"信任值"可继承至PVP模式。若某张卡牌曾在副本中10次救援队友，PVP时队友使用同阵营卡牌可获10%属性加成。
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-broken/10 text-trust-broken rounded-full text-sm">跨场景</span>
                        <span class="px-3 py-1 bg-success/10 text-success rounded-full text-sm">属性加成</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">继承系统</span>
                    </div>
                    <button onclick="showMechanicDetail(6)" class="w-full py-2 text-primary hover:text-secondary transition-colors">
                        <i class="fa fa-info-circle mr-2"></i>查看详情
                    </button>
                </div>
            </div>

            <!-- 查看更多按钮 -->
            <div class="text-center mt-12">
                <button onclick="showAllMechanics()" class="px-8 py-3 border-2 border-secondary text-secondary rounded-xl hover:bg-secondary hover:text-white transition-all duration-300">
                    <i class="fa fa-th-list mr-2"></i>查看全部11种机制
                </button>
            </div>
        </section>

        <!-- 技术实现部分 -->
        <section id="tech-implementation" class="mb-20">
            <div class="text-center mb-12">
                <h3 class="text-4xl font-bold gradient-text mb-4">前端技术实现方案</h3>
                <p class="text-gray-600 text-lg">10种HTML前端技术方案，助力快速开发和迁移</p>
            </div>

            <div class="grid lg:grid-cols-2 gap-12">
                <!-- 技术卡片1 -->
                <div class="glass-effect rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
                    <div class="flex items-start space-x-4 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-html5 text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-2xl font-bold text-gray-800 mb-2">信任可视化DOM进度条卡牌</h4>
                            <p class="text-gray-600 leading-relaxed">
                                每张卡牌内嵌HTML原生&lt;progress&gt;标签，实时同步信任值。进度条满值时触发CSS光晕动画，归零则卡牌添加"破碎"样式。
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-4 mb-6">
                        <pre class="text-sm text-gray-700 overflow-x-auto"><code>&lt;div class="card" data-trust="75"&gt;
  &lt;progress class="trust-progress" value="75" max="100"&gt;&lt;/progress&gt;
  &lt;div class="card-content"&gt;
    &lt;h5&gt;协作卡牌&lt;/h5&gt;
    &lt;p&gt;信任值: 75%&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">DOM操作</span>
                        <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">CSS动画</span>
                        <span class="px-3 py-1 bg-trust-high/10 text-trust-high rounded-full text-sm">实时同步</span>
                    </div>
                </div>

                <!-- 技术卡片2 -->
                <div class="glass-effect rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
                    <div class="flex items-start space-x-4 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-r from-trust-high to-accent rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-cubes text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-2xl font-bold text-gray-800 mb-2">组件化信任卡牌原子库</h4>
                            <p class="text-gray-600 leading-relaxed">
                                将卡牌拆分为"信任状态层"、"技能描述层"、"交互反馈层"三个独立HTML组件，便于维护和UniApp迁移。
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-4 mb-6">
                        <pre class="text-sm text-gray-700 overflow-x-auto"><code>&lt;div class="trust-card" data-trust="high"&gt;
  &lt;div class="trust-status"&gt;&lt;/div&gt;
  &lt;div class="skill-description" data-skill="shield"&gt;&lt;/div&gt;
  &lt;div class="interaction-feedback" onclick="onTrustClick()"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-high/10 text-trust-high rounded-full text-sm">组件化</span>
                        <span class="px-3 py-1 bg-success/10 text-success rounded-full text-sm">易于迁移</span>
                        <span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-sm">维护性强</span>
                    </div>
                </div>

                <!-- 技术卡片3 -->
                <div class="glass-effect rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
                    <div class="flex items-start space-x-4 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-r from-trust-neutral to-gray-500 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-dashboard text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-2xl font-bold text-gray-800 mb-2">本地信任档案HTML仪表盘</h4>
                            <p class="text-gray-600 leading-relaxed">
                                用HTML5 localStorage存储玩家信任行为数据，通过Chart.js渲染环形图和折线图，展示信任倾向占比和变化趋势。
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-4 mb-6">
                        <div class="flex items-center justify-center mb-4">
                            <canvas id="trustChart" width="200" height="200"></canvas>
                        </div>
                        <div class="text-center text-sm text-gray-600">
                            信任行为分析图表
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-neutral/10 text-trust-neutral rounded-full text-sm">本地存储</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">数据可视化</span>
                        <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">Chart.js</span>
                    </div>
                </div>

                <!-- 技术卡片4 -->
                <div class="glass-effect rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
                    <div class="flex items-start space-x-4 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-r from-trust-broken to-danger rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-share-alt text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-2xl font-bold text-gray-800 mb-2">信任碎片HTML共享组件</h4>
                            <p class="text-gray-600 leading-relaxed">
                                玩家完成信任事件后生成"信任碎片"，点击卡牌弹出HTML共享弹窗，好友通过浏览器链接即可发送碎片。
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-4 mb-6">
                        <div class="flex items-center justify-center space-x-4">
                            <div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center">
                                <i class="fa fa-qrcode text-white text-2xl"></i>
                            </div>
                            <div class="text-center">
                                <p class="text-sm text-gray-600 mb-2">扫描二维码</p>
                                <p class="text-xs text-gray-500">或点击链接助力</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="px-3 py-1 bg-trust-broken/10 text-trust-broken rounded-full text-sm">社交分享</span>
                        <span class="px-3 py-1 bg-success/10 text-success rounded-full text-sm">轻量化</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">URL参数</span>
                    </div>
                </div>

                <!-- 技术卡片5 -->
                <div class="glass-effect rounded-2xl p-8 hover:shadow-xl transition-all duration-300 lg:col-span-2">
                    <div class="flex items-start space-x-4 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-r from-success to-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-mobile text-white text-xl"></i>
                        </div>
                        <div>
                            <h4 class="text-2xl font-bold text-gray-800 mb-2">触控信任反馈卡牌（适配竖屏）</h4>
                            <p class="text-gray-600 leading-relaxed">
                                基于HTML5 touch事件优化竖屏单手操作：轻触显示信任提示，长按触发"信任预览"，滑动切换"信任/背叛"选项。
                            </p>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-3 gap-4 mb-6">
                        <div class="bg-gray-50 rounded-xl p-4 text-center">
                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-hand-pointer-o text-primary text-xl"></i>
                            </div>
                            <h5 class="font-semibold text-gray-800 mb-2">轻触</h5>
                            <p class="text-sm text-gray-600">显示信任提示框</p>
                        </div>
                        <div class="bg-gray-50 rounded-xl p-4 text-center">
                            <div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-hand-rock-o text-secondary text-xl"></i>
                            </div>
                            <h5 class="font-semibold text-gray-800 mb-2">长按</h5>
                            <p class="text-sm text-gray-600">触发信任预览</p>
                        </div>
                        <div class="bg-gray-50 rounded-xl p-4 text-center">
                            <div class="w-12 h-12 bg-trust-high/10 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-exchange text-trust-high text-xl"></i>
                            </div>
                            <h5 class="font-semibold text-gray-800 mb-2">滑动</h5>
                            <p class="text-sm text-gray-600">切换信任选项</p>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-success/10 text-success rounded-full text-sm">移动端优化</span>
                        <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">Touch事件</span>
                        <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">竖屏适配</span>
                        <span class="px-3 py-1 bg-trust-high/10 text-trust-high rounded-full text-sm">用户体验</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 信任仪表盘 -->
        <section id="trust-dashboard" class="mb-20 hidden">
            <div class="text-center mb-12">
                <h3 class="text-4xl font-bold gradient-text mb-4">信任行为仪表盘</h3>
                <p class="text-gray-600 text-lg">实时监控和分析玩家的信任行为数据</p>
            </div>

            <div class="grid lg:grid-cols-2 gap-8">
                <!-- 信任倾向饼图 -->
                <div class="glass-effect rounded-2xl p-8">
                    <h4 class="text-xl font-bold text-gray-800 mb-6 text-center">信任行为倾向</h4>
                    <div class="flex justify-center">
                        <canvas id="trustPieChart" width="300" height="300"></canvas>
                    </div>
                </div>

                <!-- 信任值趋势图 -->
                <div class="glass-effect rounded-2xl p-8">
                    <h4 class="text-xl font-bold text-gray-800 mb-6 text-center">信任值变化趋势</h4>
                    <canvas id="trustLineChart" width="400" height="300"></canvas>
                </div>

                <!-- 信任统计卡片 -->
                <div class="glass-effect rounded-2xl p-8 lg:col-span-2">
                    <h4 class="text-xl font-bold text-gray-800 mb-6 text-center">信任统计概览</h4>
                    <div class="grid md:grid-cols-4 gap-6">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-r from-trust-high to-accent rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-check text-white text-2xl"></i>
                            </div>
                            <h5 class="text-2xl font-bold text-trust-high mb-1" id="cooperationCount">156</h5>
                            <p class="text-gray-600">协作次数</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-r from-trust-broken to-danger rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-times text-white text-2xl"></i>
                            </div>
                            <h5 class="text-2xl font-bold text-trust-broken mb-1" id="betrayalCount">23</h5>
                            <p class="text-gray-600">背叛次数</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-heart text-white text-2xl"></i>
                            </div>
                            <h5 class="text-2xl font-bold text-primary mb-1" id="trustScore">87</h5>
                            <p class="text-gray-600">信任评分</p>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-r from-success to-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fa fa-trophy text-white text-2xl"></i>
                            </div>
                            <h5 class="text-2xl font-bold text-success mb-1" id="reputationLevel">Level 5</h5>
                            <p class="text-gray-600">声望等级</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框 -->
    <div id="modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
        <div class="glass-effect rounded-2xl p-8 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-6">
                <h3 id="modalTitle" class="text-2xl font-bold gradient-text"></h3>
                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700 text-2xl">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div id="modalContent" class="text-gray-600 leading-relaxed"></div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <div class="flex items-center justify-center space-x-3 mb-4">
                <div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center">
                    <i class="fa fa-heart text-white"></i>
                </div>
                <h3 class="text-xl font-bold">信任机制游戏设计文档</h3>
            </div>
            <p class="text-gray-400 mb-6">
                为游戏开发者提供创新的信任系统设计方案和前端技术实现
            </p>
            <div class="flex justify-center space-x-6">
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-linkedin text-xl"></i>
                </a>
            </div>
            <p class="text-gray-500 text-sm mt-6">
                © 2025 信任机制游戏设计文档. All rights reserved.
            </p>
        </div>
    </footer>

    <script>
        // 全局变量
        let trustData = {
            cooperation: 156,
            betrayal: 23,
            trustScore: 87,
            reputationLevel: 5
        };

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            initializeLocalStorage();
            setupScrollAnimations();
        });

        // 初始化图表
        function initializeCharts() {
            // 信任行为饼图
            const pieCtx = document.getElementById('trustPieChart');
            if (pieCtx) {
                new Chart(pieCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['协作', '背叛', '中立'],
                        datasets: [{
                            data: [trustData.cooperation, trustData.betrayal, 45],
                            backgroundColor: [
                                '#10b981',
                                '#ef4444',
                                '#6b7280'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    padding: 20,
                                    usePointStyle: true
                                }
                            }
                        }
                    }
                });
            }

            // 信任值趋势图
            const lineCtx = document.getElementById('trustLineChart');
            if (lineCtx) {
                new Chart(lineCtx, {
                    type: 'line',
                    data: {
                        labels: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天'],
                        datasets: [{
                            label: '信任值',
                            data: [65, 72, 68, 85, 82, 87, 90],
                            borderColor: '#2563eb',
                            backgroundColor: 'rgba(37, 99, 235, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 100
                            }
                        }
                    }
                });
            }
        }

        // 初始化本地存储
        function initializeLocalStorage() {
            if (!localStorage.getItem('trustData')) {
                localStorage.setItem('trustData', JSON.stringify(trustData));
            } else {
                trustData = JSON.parse(localStorage.getItem('trustData'));
                updateDashboardStats();
            }
        }

        // 更新仪表盘统计
        function updateDashboardStats() {
            document.getElementById('cooperationCount').textContent = trustData.cooperation;
            document.getElementById('betrayalCount').textContent = trustData.betrayal;
            document.getElementById('trustScore').textContent = trustData.trustScore;
            document.getElementById('reputationLevel').textContent = `Level ${trustData.reputationLevel}`;
        }

        // 设置滚动动画
        function setupScrollAnimations() {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-fade-in');
                    }
                });
            }, observerOptions);

            // 观察所有卡片元素
            document.querySelectorAll('.glass-effect').forEach(card => {
                observer.observe(card);
            });
        }

        // 滚动到指定区域
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // 切换主题
        function toggleTheme() {
            document.body.classList.toggle('dark');
            const isDark = document.body.classList.contains('dark');
            localStorage.setItem('darkMode', isDark);
            
            // 更新主题按钮图标
            const themeBtn = event.target.closest('button');
            const icon = themeBtn.querySelector('i');
            if (isDark) {
                icon.className = 'fa fa-sun-o mr-2';
            } else {
                icon.className = 'fa fa-moon-o mr-2';
            }
        }

        // 显示信任仪表盘
        function showTrustDashboard() {
            const dashboard = document.getElementById('trust-dashboard');
            dashboard.classList.toggle('hidden');
            if (!dashboard.classList.contains('hidden')) {
                dashboard.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // 显示机制详情
        function showMechanicDetail(mechanicId) {
            const modal = document.getElementById('modal');
            const modalTitle = document.getElementById('modalTitle');
            const modalContent = document.getElementById('modalContent');

            const mechanics = {
                1: {
                    title: '双向信任同步卡牌机制',
                    content: `
                        <h4 class="text-xl font-bold mb-4 text-gray-800">核心逻辑</h4>
                        <p class="mb-4">玩家与AI伙伴各持半副卡组（竖屏上下分区展示），关键回合需同步选择"信任/背叛"卡牌。双方均选信任则触发组合技（如"联防护盾"）；单方背叛则背叛方获短期收益，但AI伙伴下三回合概率不出强力卡；双方背叛则双输（如扣除共同资源）。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">竖屏适配</h4>
                        <p class="mb-4">底部滑动选卡，顶部实时显示AI选卡倒计时，松手即确认，贴合单手操作习惯。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">策略深度</h4>
                        <p>需要玩家在短期利益和长期合作之间做出权衡，培养玩家的战略思维和合作意识。</p>
                    `
                },
                2: {
                    title: '信任衰减卡牌时效系统',
                    content: `
                        <h4 class="text-xl font-bold mb-4 text-gray-800">核心逻辑</h4>
                        <p class="mb-4">"盟约卡"初始信任值满格（效果最强），若连续3回合未被队友卡牌配合激活，信任值随进度条衰减（竖屏卡牌边缘显示红色递减光晕），最终变为"猜忌卡"（效果减半且可能误伤友军）。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">创新点</h4>
                        <p class="mb-4">首次触发"信任修复"（主动消耗资源为队友卡牌充能）可逆转衰减，强化协作意识。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">视觉反馈</h4>
                        <p>通过颜色变化、光晕效果和进度条直观展示信任值变化，增强玩家的感知体验。</p>
                    `
                },
                3: {
                    title: '社交众筹信任卡牌池',
                    content: `
                        <h4 class="text-xl font-bold mb-4 text-gray-800">核心逻辑</h4>
                        <p class="mb-4">玩家发起"史诗信任任务"（如攻打Boss），需向好友众筹"信任筹码"激活强力卡牌。众筹人数达标但任务失败时，发起者与参与者共同承担资源损失；任务成功则按众筹比例分配奖励。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">竖屏交互</h4>
                        <p class="mb-4">底部抽屉式展示众筹进度，点击卡牌可快速赠予筹码，无需跳转页面。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">社交价值</h4>
                        <p>促进玩家间的互动与合作，建立游戏内的信任关系网络，增强游戏的社交属性。</p>
                    `
                },
                4: {
                    title: '信任可视化卡牌进化体系',
                    content: `
                        <h4 class="text-xl font-bold mb-4 text-gray-800">核心逻辑</h4>
                        <p class="mb-4">每张卡牌初始为"中立形态"，随玩家信任行为动态进化：连续5次选择协作可解锁"圣约形态"（边框鎏金+特效升级）；累计3次背叛则变为"破碎形态"（暗黑纹理+负面反噬）。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">策略深度</h4>
                        <p class="mb-4">形态不可逆且影响卡组羁绊（如3张圣约卡激活"同心buff"），倒逼玩家权衡短期收益与长期卡组价值。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">视觉设计</h4>
                        <p>通过精美的视觉设计展现卡牌的进化过程，给玩家强烈的成就感和收藏欲望。</p>
                    `
                },
                5: {
                    title: '盲选信任囚徒困境对决',
                    content: `
                        <h4 class="text-xl font-bold mb-4 text-gray-800">核心逻辑</h4>
                        <p class="mb-4">PVP对战中，双方同时盲选"信任/防御/背叛"三类卡牌（竖屏中间区域遮挡），倒计时结束同步翻转。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">对决规则</h4>
                        <ul class="list-disc list-inside mb-4 space-y-2">
                            <li>双信任：双方共享资源</li>
                            <li>信任VS背叛：背叛方获双倍收益，信任方损失</li>
                            <li>双背叛：均触发"反噬伤害"</li>
                        </ul>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">创新点</h4>
                        <p>战后生成"信任图谱"，展示对手历史选择倾向，辅助下局预判。</p>
                    `
                },
                6: {
                    title: '跨场景信任继承机制',
                    content: `
                        <h4 class="text-xl font-bold mb-4 text-gray-800">核心逻辑</h4>
                        <p class="mb-4">卡牌在PVE副本中积累的"信任值"可继承至PVP模式：若某张卡牌曾在副本中10次救援队友，PVP时队友使用同阵营卡牌可获其10%属性加成。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">竖屏展示</h4>
                        <p class="mb-4">卡牌角落标注"信任勋章"，侧滑可查看该卡牌的跨场景协作记录。</p>
                        
                        <h4 class="text-xl font-bold mb-4 text-gray-800">系统价值</h4>
                        <p>增强不同游戏模式间的关联性，给玩家持续的目标感和成长动力。</p>
                    `
                }
            };

            const mechanic = mechanics[mechanicId];
            if (mechanic) {
                modalTitle.textContent = mechanic.title;
                modalContent.innerHTML = mechanic.content;
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }
        }

        // 显示所有机制
        function showAllMechanics() {
            const modal = document.getElementById('modal');
            const modalTitle = document.getElementById('modalTitle');
            const modalContent = document.getElementById('modalContent');

            modalTitle.textContent = '全部11种信任机制设计';
            modalContent.innerHTML = `
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <h4 class="text-lg font-bold text-gray-800">基础信任机制</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-2"></i>
                                双向信任同步卡牌机制
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-2"></i>
                                信任衰减卡牌时效系统
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-2"></i>
                                社交众筹信任卡牌池
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-2"></i>
                                信任可视化卡牌进化体系
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-2"></i>
                                盲选信任囚徒困境对决
                            </li>
                        </ul>
                    </div>
                    <div class="space-y-4">
                        <h4 class="text-lg font-bold text-gray-800">进阶信任机制</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa fa-star text-accent mr-2"></i>
                                跨场景信任继承机制
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-star text-accent mr-2"></i>
                                信任抵押卡牌借贷系统
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-star text-accent mr-2"></i>
                                动态信任叙事卡牌链
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-star text-accent mr-2"></i>
                                AI信任镜像模仿机制
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-star text-accent mr-2"></i>
                                信任堆叠场景构建系统
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-star text-accent mr-2"></i>
                                全服信任监督奖惩机制
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="mt-6 p-4 bg-gray-50 rounded-xl">
                    <h4 class="text-lg font-bold text-gray-800 mb-2">设计理念</h4>
                    <p class="text-gray-600">
                        这11种信任机制涵盖了从基础的卡牌交互到复杂的社交系统，从单人游戏到多人对战，
                        为玩家提供了丰富的信任体验。每个机制都经过精心设计，既考虑了游戏的趣味性，
                        又兼顾了技术的可行性，适合在不同类型的游戏中应用。
                    </p>
                </div>
            `;
            
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('modal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        // 点击模态框外部关闭
        document.getElementById('modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // 键盘事件监听
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });

        // 模拟信任行为数据更新
        function simulateTrustBehavior() {
            const actions = ['cooperation', 'betrayal'];
            const randomAction = actions[Math.floor(Math.random() * actions.length)];
            
            if (randomAction === 'cooperation') {
                trustData.cooperation++;
                trustData.trustScore = Math.min(100, trustData.trustScore + 2);
            } else {
                trustData.betrayal++;
                trustData.trustScore = Math.max(0, trustData.trustScore - 5);
            }
            
            // 更新声望等级
            const totalActions = trustData.cooperation + trustData.betrayal;
            trustData.reputationLevel = Math.floor(totalActions / 50) + 1;
            
            localStorage.setItem('trustData', JSON.stringify(trustData));
            updateDashboardStats();
        }

        // 每30秒模拟一次信任行为
        setInterval(simulateTrustBehavior, 30000);
    </script>
</body>
</html>